<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background: url('/Public/game/images/back.jpg') center no-repeat; background-size: cover;
        
    }
    #main {
        display: flex; flex-direction: column; align-items: center;justify-content: center; height: 100%;; gap: 2vw;
    }
    .panel{
        border: 2px solid black;
        padding: 20px; margin: 10px; width: 80vw;
    }
    th, td{
        font-size: 1.25rem;gap: 1.5rem;padding: 0.2rem 1rem; text-align: center;
    }
    .clue, .game{
        width: 8rem;text-align: center;
    }
    button{
        padding: 0.2rem 1rem;
    }
    .clue-panel{
        width: 30vw;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1.5rem;
    }
    .clue-list{
        height: 60vh;
        overflow-y: scroll;
    }
    .clue-item {
        line-height: 3rem;
    }
    .clue-item img{
        height: 3rem;
    }
    .clue-add{margin-top: 2rem;}
</style>
<body>
    <div id="main">
        <!-- <div class="clue-panel">
            <div class="clue-list">
                <volist name="clue" id="vo">
                    <div class="clue-item">{$vo.id}号线索:
                        <if condition="$vo['type'] eq 'text'">{$vo.content}</if>
                        <if condition="$vo['type'] eq 'image'"><img src="{$vo.content}"></if>
                    </div>
                </volist>
            </div>
            <div class="clue-add">
                <textarea id="add-content" name="clue" value="" rows="4" placeholder="请输入线索"></textarea><br/>
                <button id="clue-add">添加</button>
            </div>
        </div>   -->
        <div class="panel">
            <h2>购物列表</h2>
            <table id="cart-table"></table>
        </div>
        
        <div class="panel">
            <h2>商店设置</h2>
            <table>
                <tr>
                    <th>状态</th>
                    <th>初始金额</th>
                    <th>操作</th>
                    <th>心跳</th>
                </tr>
                <tr>
                    <td id="status">{$shop_status['status']}</td>
                    <td><input class="game" type="number" id="balance" value="{$shop_status['balance']}"></td>
                    <td>
                        <button name="set-status" value="start">投币</button>
                        <button name="set-status" value="loading">等待</button>
                        <button name="set-status" value="shop">设置余额</button>
                        <button name="set-status" value="ready">复位LOGO</button>
                        <button name="set-status" value="reset">清除商品</button>

                    </td>
                    <td id="heartbeat"></td>
                </tr>
            </table>
        </div>
        <div class="panel">
            <h2>商品列表</h2>
            <table>
                <tr>
                    <th>ID</th>
                    <th>商品名称</th>
                    <th>限购</th>
                    <th>单价</th>
                    <th>操作</th>
                </tr>
                <volist name="product" id="vo">
                    <tr>
                        <td>{$vo.id}</td>
                        <td>{$vo.title}</td>
                        <td>{$vo.max}</td>
                        <td><input class="clue" type="number" min="1" name="price" value="{$vo.price}" id="price-{$vo.id}"></td>
                        <td>
                            <button class="set-price" name="set-price" data-product-id="{$vo.id}">修改</button>
                        </td>
                        <!-- <td id="refresh-{$vo.id}"></td> -->
                    </tr>
                </volist>   
            </table>
        </div>
        
    </div>
</body>
<script>
    function updateStatus(){
        $.ajax({
            url: "/Home/Havefun/get_client_status",
            method: "post",
            success: function(res){
                let data = res.data;
                $("#heartbeat").text(data.heartbeat_status + ': ' + data.heartbeat);
                $("#cart-table").html('')
                console.log(res.data.cart);
                for(let i = 0; i < data.cart.length; i++){
                    let cart = data.cart[i]
                    let tr = $('<tr></tr>')
                    tr.append($('<td></td>').text(cart.update_time))
                    tr.append($('<td></td>').text(cart.content))
                    $("#cart-table").append(tr)
                }
                $("#status").text(data.shop_status.status)
                setTimeout(updateStatus, 1000)
            }
        })
    }
    updateStatus()
    $("button.set-price").click(function(){
        let product_id = $(this).data('product-id')
        let price = $("#price-" + product_id).val()
        let loading = weui.loading('提交...');
        $.ajax({
            url: "/Home/Havefun/set_price",
            method: "post",
            data:{
                product_id: product_id,
                price: price
            },
            success: function(res){
                loading.hide()
                if(res.status){
                    weui.toast('设置成功', 1000, function(){
                       window.location.reload() 
                    })
                }else{
                    weui.toast('设置失败', 1000, function(){
                        window.location.reload()
                    })   
                }
            }
        })
    })
    $("button[name='set-status']").click(function(){
        let status = $(this).val()
        if(status == 'shop'){
        }
        else if(status == 'ready'){
            $("#balance").val(0)
        }
        let balance = $("#balance").val()
        console.log(status, balance);
        let loading = weui.loading('提交...');
        $.ajax({
            url: "/Home/Havefun/set_data",
            method: "post",
            data:{
                status: status,
                balance: balance
            },
            success: function(res){
                loading.hide()
                if(res.status){
                    weui.alert('设置成功', function(){
                       window.location.reload() 
                    })
                }else{
                    weui.alert('设置失败', function(){
                        window.location.reload()
                    })   
                }
            }
        })
    })
    
</script>
</html>